<template>
	<view>
		<u-navbar :title="$t('我的团队')"  background="{ background: '#ffffff' }" title-color="#000" back-icon-color="#000"	>
			<view class="righttit" slot="right" @click="$.to('/pagesA/pages/my/yaoqing')">
				 {{$t('邀请好友')}}
			</view>
		</u-navbar>
		<view class="wrap">
			<view class="chengyuan">
				<view class="yi">{{ $t("团队成员") }}：<text>{{renNum}}</text>{{ $t("人") }}</view>
				<view class="yaoNum">{{ $t("邀请码") }}：{{num}}</view>
			</view>

			<u-tabs :list="list" active-color="#10B0B0" bg-color="" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="box" v-if="!show">
				<view class="list" v-for="(item,idx) in dataList" :key="idx">
					<image :src="item.image" mode=""></image>
					<view class="nickname">
						{{item.nickname}}
					</view>
					<view class="xf_num">
						{{ $t("累计消费") }}:￥{{item.consumption}}{{ $t("元") }}
					</view>
				</view>
			</view>
			<u-empty text="暂无成员" margin-top="200" mode="list" v-show="show"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: this.$t('一级成员'),
					type: 1,
				}, {
					name: this.$t('二级成员'),
					type: 2,
				}, {
					name: this.$t('三级成员'),
					type: 3,
				}],
				current: 0,
				show:false,
				num:'',
				renNum:0,
				dataList:[],
				page:1,
			}
		},
		onLoad() {
			if (uni.getStorageSync("user")) {
				this.getData(1)
				this.num = uni.getStorageSync("user").share_ma
			}
		},
		// 触底
		onReachBottom() {
			if (this.dataList.length < this.page * 10) {
				return
			}
			var type = this.list[this.current].type
			this.page++;
			this.getData(type)
		},
		methods: {
			getData(type){
				this.$http({
					url: "/api/member/get_my_team",
					data: {
						type: type,
						page:1,
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						if(res.data.data.count == 0){
							this.show = true
						}else{
							this.show = false
						}
						var data = res.data.data.list;
						this.dataList = this.dataList.concat(data);
						console.log(this.dataList ,'this.dataList')
						this.renNum = res.data.data.count
					}else{
						this.show = true
					}
				
				}).catch(err => {});
			},
			change(index) {
				this.current = index;
				this.dataList = [];
				this.page = 1;
				var type = this.list[index].type
				this.getData(type);
			},
			
		}
	}
</script>

<style>
	page {
		background: #f2fafc url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/ef044002e484978c199820dd1427182b.jpg") no-repeat top center;
		background-size: 100% auto;
	}
	.righttit{
		margin-right: 20rpx;
	}
	.wrap{
		padding: 0 30rpx;
		box-sizing: border-box;
		 padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ 	
		 padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ 
	}
	.chengyuan{
		background-image: linear-gradient(to right,#a7a7f8, #8970f0);
		height: 190rpx;
		border-radius: 16rpx;
		margin: 20rpx 0;
		color: #fff;
		text-align: center;
		padding-top: 2rpx;
	}
	.chengyuan .yi{
		margin-top: 40rpx;
	}
	.chengyuan text{
		font-size: 38rpx;
	}
	.chengyuan .yaoNum{
		margin-top: 20rpx;
	}
	.list {
		display: flex;
		align-items: center;
	}
	.list image {
		
	}
	.list .nickname {
		width: 230rpx;
	}
	.list .xf_num {
		font-size: 26rpx;
		flex: 1;
		margin-right: 10rpx;
		text-align: right;
	}
	.box{
		margin: 20rpx 0;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 1rpx 20rpx;
		box-sizing: border-box;
	}
	.box .list{
		margin: 20rpx 0;
	}
	.box .list image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		vertical-align: middle;
		margin-right: 20rpx;
	}
</style>
